<!DOCTYPE html>
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        >

<h:head>
    <title>WhoMeToo</title>
    <h:outputStylesheet library="css" name="typeface.css"/>
    <h:outputStylesheet library="css" name="common.css"/>
    <h:outputStylesheet library="css" name="bootstrap.css"/>
    <h:outputStylesheet library="css" name="login.css"/>
</h:head>

<f:view>

    <h:body styleClass="body">

        <ui:include src="/views/navbar.xhtml"/>

        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span2">
                    <ui:include src="sidebar.xhtml"/>
                </div>
                <div class="span10">
                    <!-- Main unit -->

                    <div class="container-full-editdetails">

                        <div style="font-size: 21px;" class="container white-text">

                            <p style="font-size: 45px;">#{msgs['userinfo.edituserdetails']}</p>
                            <br/>
                            <br/>

                            <div class="row">

                                <!--User details column-->

                                <div class="span4">

                                    <h:form id="register" prependId="false">
                                        <!--<h3>#{msgs['userinfo.editcommoninfo']}</h3>-->

                                        <label for="name">
                                            <h:outputText value="#{msgs['userinfo.name']}:"/>
                                            <br/>
                                        </label>
                                        <h:inputText id="name"
                                                     value="#{userDetailsBean.changedUser.name}"
                                                     required="true" requiredMessage="Name is required">
                                        </h:inputText>
                                        <h:message styleClass="validationerrorwhite" for="name"/>

                                        <br/>

                                        <label for="email">
                                            <h:outputText value="#{msgs['userinfo.email']}:"/>
                                            <br/> </label>
                                        <h:inputText id="email" value="#{userDetailsBean.changedUser.email}"
                                                     required="true" requiredMessage="Email must not be empty">
                                        </h:inputText>
                                        <h:message styleClass="validationerrorwhite" for="email"/>

                                        <br/>

                                        <label for="phonenumber">
                                            <h:outputText value="#{msgs['userinfo.telno']}:"/>
                                            <br/>
                                        </label>
                                        <h:inputText id="phonenumber" value="#{userDetailsBean.changedUser.phoneNumber}"
                                                     required="true" requiredMessage="Phone number is required">
                                        </h:inputText>
                                        <h:message styleClass="validationerrorwhite" for="phonenumber"/>

                                        <br/>
                                        <br/>

                                        <h:commandButton styleClass="btn btn-large btn-warning btnfont" id="edtuserinfo"
                                                         type="submit"
                                                         action="#{userDetailsBean.editUserInfo}"
                                                         value="#{msgs['userinfo.savechanges']}"/>

                                        <br/>

                                    </h:form>

                                </div>

                                <!--Password column-->

                                <div class="span4 offset1">

                                    <h:form id="changePasswordForm">
                                        <h:message styleClass="errormessage" for="changePasswordForm"></h:message>

                                        <!--<h3>#{msgs['userinfo.editpassword']}</h3>-->

                                        <label for="curpswd">
                                            <h:outputText value="#{msgs['userinfo.curpassword']}:"/>
                                            <br/>
                                        </label>
                                        <h:inputSecret id="curpswd" name="curPswd"
                                                       value="#{userDetailsBean.changedUser.password}" required="true"
                                                       requiredMessage="Please input current password">
                                        </h:inputSecret>
                                        <h:message styleClass="validationerrorwhite" for="curpswd"/>

                                        <br/>

                                        <label for="newpswd">
                                            <h:outputText value="#{msgs['userinfo.newpassword']}:"/>
                                            <br/>
                                        </label>
                                        <h:inputSecret id="newpswd" name="newPswd"
                                                       value="#{userDetailsBean.newPassword}"
                                                       required="true" requiredMessage="Please input your new password">
                                            <f:validateRegex
                                                    pattern="#{passwordValidationBean.passwordValidationPattern}"/>
                                        </h:inputSecret>
                                        <h:message styleClass="validationerrorwhite" for="newpswd"/>

                                        <br/>

                                        <label for="newpswdconfirm">
                                            <h:outputText
                                                    value="#{msgs['userinfo.confirmnewpswd']}:"/>
                                            <br/> </label>
                                        <h:inputSecret id="newpswdconfirm" name="newPswdConfirm"
                                                       value="#{userDetailsBean.newPasswordConfirmation}"
                                                       required="true"
                                                       requiredMessage="Please confirm your new password">
                                        </h:inputSecret>
                                        <h:message styleClass="validationerrorwhite" for="newpswdconfirm"/>

                                        <br/>
                                        <br/>

                                        <h:commandButton styleClass="btn btn-large btn-warning btnfont"
                                                         id="pswdeditconfirm"
                                                         type="submit"
                                                         action="#{userDetailsBean.editUserPassword}"
                                                         value="#{msgs['userinfo.editpassword']}"/>

                                    </h:form>

                                </div>

                                <!--End of row-->

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>

    </h:body>
</f:view>
</html>